<div class="sticky-top-section mt-5 mt-lg-0 mb-4 mb-md-6 mb-lg-9 px-md-0 px-3">
  <variant-lists data-url="{{ product.url }}" data-section="{{ section.id }}" class="d-none">
    <label for="product-{{ product.id }}-variant" class="form-label visually-hidden">Variant</label>
    <select id="product-{{ product.id }}-variant" class="as-product-variant" name="id">
      {%- for variant in product.variants -%}
        <option class="as-product-variant-option" value="{{ variant.id }}"
        {% if variant.option1 %}data-option1="{{ variant.option1 }}" {% endif %}
        {% if variant.option2 %}data-option2="{{ variant.option2 }}" {% endif %}
        {% if variant.option3 %}data-option3="{{ variant.option3 }}" {% endif %}
          {%- if variant == current_variant %} selected="selected" {%- endif -%}>
          {{ variant.title }}
        </option>
      {%- endfor -%}
    </select>
  </variant-lists>
  {%- assign product_form_id = 'as-product-form-' | append: section.id -%}
  <div class="purchase-main">
  {%- for block in section.blocks -%}
    {%- case block.type -%}
      {%- when 'text' -%}
        {%- liquid
          case block.settings.text_type
            when 'uppercase'
              assign text_type = 'text-uppercase text-accent'
            when 'footnote'
              assign text_type = 'small text-muted'
            else
              assign text_type = ''
          endcase
        -%}
        <div class="text-icon-wrapper d-flex align-items-center {{ text_type }} {{ block.settings.margin_bottom }}">
          {% if block.settings.advert_icon != blank %}
            <img class="advert-icon float-start me-2" style="height: 2em;"
              src="{{ block.settings.advert_icon | img_url: 'master' }}" alt="{{ block.settings.advert_icon.alt }}">
          {% endif %}
          <p class="mb-0 fs-7 {% if block.settings.advert_icon == blank %} new-text {% else %} label-text {% endif %}">{{ block.settings.text }}</p>
        </div>
      {%- when 'title' -%}
        <h1 class="fs-2 mb-3 product-title">{{ product.title }}</h1>
      {%- when 'paypal' -%}
        <script src="https://www.paypal.com/sdk/js?client-id=Aev9bvYSpQEQjQGk-M9DT_-grE8RTor7mN162-9QwJScmHHLkAdKNyaePUkE5lXs_b6ccgzGvDXlutDl&components=messages&currency={{ shop.currency }}"></script>
        <div class="as-paypal-installment">
          <div data-pp-buyerCountry="US" data-pp-message data-pp-placement="product" data-pp-amount="{{ product.selected_or_first_available_variant.price | divided_by:100 }}"></div>
        </div>
      {%- when 'price' -%}
        <div class="mb-4 product-price" id="price-{{ section.id }}">
          {% render 'price', product: product, use_variant: true, show_badges: false, price_class: 'product-price' %}
        </div>
      {%- when 'line' -%}

        <div class="{{ block.settings.top_space }} {{ block.settings.bottom_space }}">
          <div class="bg-gray-300" style="height: 1px;"></div>
        </div>
      {%- when 'variant_picker' -%}
        <div class="">

        {%- unless product.has_only_default_variant -%}
          <variant-options data-levels="{{ product.options_with_values.size }}" data-section="{{ section.id }}" data-url="{{ product.url }}">
            {%- for option in product.options_with_values -%}
              {%- liquid
                assign show_color_swatch = false
                if block.settings.enable_color_swatches
                  assign option_name = option.name | downcase
                  if option_name == 'color' or option.name == block.settings.swatch_option_name
                    assign show_color_swatch = true
                  endif
                endif
              -%}
              {% if show_color_swatch %}
                {% assign browser_support_color = ',AliceBlue,AntiqueWhite,Aqua,Aquamarine,Azure,Beige,Bisque,Black,BlanchedAlmond,Blue,BlueViolet,Brown,BurlyWood,CadetBlue,Chartreuse,Chocolate,Coral,CornflowerBlue,Cornsilk,Crimson,Cyan,DarkBlue,DarkCyan,DarkGoldenRod,DarkGray,DarkGreen,DarkKhaki,DarkMagenta,DarkOliveGreen,Darkorange,DarkOrchid,DarkRed,DarkSalmon,DarkSeaGreen,DarkSlateBlue,DarkSlateGray,DarkTurquoise,DarkViolet,DeepPink,DeepSkyBlue,DimGray,DodgerBlue,Feldspar,FireBrick,FloralWhite,ForestGreen,Fuchsia,Gainsboro,GhostWhite,Gold,GoldenRod,Gray,Green,GreenYellow,HoneyDew,HotPink,IndianRed,Indigo,Ivory,Khaki,Lavender,LavenderBlush,LawnGreen,LemonChiffon,LightBlue,LightCoral,LightCyan,LightGoldenRodYellow,LightGrey,LightGreen,LightPink,LightSalmon,LightSeaGreen,LightSkyBlue,LightSlateBlue,LightSlateGray,LightSteelBlue,LightYellow,Lime,LimeGreen,Linen,Magenta,Maroon,MediumAquaMarine,MediumBlue,MediumOrchid,MediumPurple,MediumSeaGreen,MediumSlateBlue,MediumSpringGreen,MediumTurquoise,MediumVioletRed,MidnightBlue,MintCream,MistyRose,Moccasin,NavajoWhite,Navy,OldLace,Olive,OliveDrab,Orange,OrangeRed,Orchid,PaleGoldenRod,PaleGreen,PaleTurquoise,PaleVioletRed,PapayaWhip,PeachPuff,Peru,Pink,Plum,PowderBlue,Purple,Red,RosyBrown,RoyalBlue,SaddleBrown,Salmon,SandyBrown,SeaGreen,SeaShell,Sienna,Silver,SkyBlue,SlateBlue,SlateGray,Snow,SpringGreen,SteelBlue,Tan,Teal,Thistle,Tomato,Turquoise,Violet,VioletRed,Wheat,White,WhiteSmoke,Yellow,YellowGreen,' | downcase %}

                  <fieldset class="as-option-wrap mb-5 as-color-swatch">
                    <legend class="mb-2 option-title">{{ option.name }}: <span class="as-color-option-name">{{ option.selected_value }}</span></legend>
                    <div class="d-flex flex-wrap m-n2 as-color-swatch-input">
                      {%- for value in option.values -%}
                        {%- capture is_not_exist -%}
                          {%- render 'filter-options', product: product, option: option, value: value, current_variant: current_variant -%}
                        {%- endcapture -%}
                        {% assign is_not_exist = is_not_exist | strip %}
                        <div class="my-1 mx-2 color-swatch-btn">
                          <input data-position="{{ option.position }}" type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                            class="as-step-option color-swatch-btn-input"
                            name="{{ option.name }}"
                            value="{{ value | escape }}"
                            form="as-product-form-{{ section.id }}"
                            {% if option.selected_value == value %}checked{% endif %}
                            {% if is_not_exist == 'true' %}disabled{% endif %}
                          >
                          <label class="color-swatch-btn-label" for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                            {%- liquid
                              assign search_terms = value | downcase | prepend: ',' | append: ','
                            -%}
                            {%- if block.settings.color_swatches_rule_configuration contains value -%}
                              {%- liquid
                                assign files_support_color = block.settings.color_swatches_rule_configuration | split: ";"
                                for rule in files_support_color
                                  assign rule_item = rule | split: ':'
                                  if rule_item.first == value
                                    assign rule_value = rule_item.last
                                    break
                                  endif
                                endfor
                                if rule_value contains '#'
                                  assign option_color = rule_value
                                elsif rule_value contains '.'
                                  assign option_img = images[rule_value]
                                endif
                              -%}

                              {%- if option_img != blank -%}
                                <img width="auto" height="auto" loading="lazy" src="{{ option_img | img_url: '24x24' }}" class="h-100 w-100 object-fit-cover rounded" alt="{{ value }}">
                              {%- elsif option_color != blank -%}
                                <span style="background-color: {{ option_color }}"></span>
                              {%- endif -%}
                            {%- elsif browser_support_color contains search_terms -%}
                              <span style="background-color: {{ value | downcase }}"></span>
                            {%- else -%}
                              <span class="bg-white"></span>
                            {%- endif -%}
                          </label>
                        </div>
                      {%- endfor -%}
                    </div>
                  </fieldset>
              {% endif %}
              {%- if block.settings.type == 'button' and show_color_swatch != true -%}
                <fieldset class="as-option-wrap mb-5">
                  <legend class="mb-2 option-title">{{ option.name }}</legend>
                  <div class="d-grid gap-2">
                    {%- for value in option.values -%}
                      {%- capture is_not_exist -%}
                        {%- render 'filter-options', product: product, option: option, value: value, current_variant: current_variant -%}
                      {%- endcapture -%}
                      {% assign is_not_exist = is_not_exist | strip %}
                      <div class="radio-btn">
                        <input data-position="{{ option.position }}" type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                          class="as-step-option radio-btn-input"
                          name="{{ option.name }}"
                          value="{{ value | escape }}"
                          form="as-product-form-{{ section.id }}"
                          {% if option.selected_value == value %}checked{% endif %}
                          {% if is_not_exist == 'true' %}disabled{% endif %}
                        >

                        <label class="radio-btn-label w-100 option-btn justify-content-between" for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                          {%- liquid
                            assign option_marker_values = ""
                            assign option_marker_colors = ""

                            if block.settings.options_marker contains value
                              assign option_markers = block.settings.options_marker | split: ";"
                              for option_marker in option_markers
                                assign option_marker_item = option_marker | split: ':'
                                if option_marker_item[0] == value
                                  assign option_marker_value = option_marker_item[1]
                                  assign option_marker_color = option_marker_item[2]
                                  assign option_marker_values = option_marker_values | append: option_marker_value | append: ','
                                  assign option_marker_colors = option_marker_colors | append: option_marker_color | append: ','
                                endif
                              endfor
                            endif
                          -%}

                          {% assign option_marker_values = option_marker_values | split: ',' | uniq %}
                          {% assign option_marker_colors = option_marker_colors | split: ',' | uniq %}

                          <span class="">{{ value }}</span>
                          {% if option_marker_values.size > 0 %}
                            <span class="ms-2 me-n2 as-mark-values text-end">
                              {% for option_marker_value in option_marker_values %}
                                {% assign i = forloop.index0 %}
                                {% if option_marker_value != blank %}
                                  <span class="as-value d-inline-block variant-marker bg-primary text-white rounded-pill fs-footnote px-2 text-center fw-normal" style="background-color: {{ option_marker_colors[i] }} !important;">{{ option_marker_value }}</span>
                                {% endif %}
                              {% endfor %}
                            </span>
                          {% endif %}
                        </label>
                      </div>
                    {%- endfor -%}
                  </div>
                </fieldset>
              {%- elsif block.settings.type == 'dropdown' and show_color_swatch != true -%}
                <div class="mb-5">
                  <label class="fw-bold mb-2" for="Option-{{ section.id }}-{{ forloop.index0 }}">
                    {{ option.name }}
                  </label>
                  <div class="as-option-wrap">
                    <div class="select-btn-wrap">
                      <select id="Option-{{ section.id }}-{{ forloop.index0 }}"
                        class="select-btn"
                        name="options[{{ option.name | escape }}]"
                        form="as-product-form-{{ section.id }}"
                      >
                        {%- for value in option.values -%}
                        {%- capture is_not_exist -%}
                          {%- render 'filter-options', product: product, option: option, value: value, current_variant: current_variant -%}
                        {%- endcapture -%}
                        {% assign is_not_exist = is_not_exist | strip %}
                          <option data-position="{{ option.position }}" class="as-step-option" value="{{ value | escape }}" {% if is_not_exist == 'true' %}disabled{% endif %} {% if option.selected_value == value %}selected="selected"{% endif %}>
                            {{ value }}
                          </option>
                        {%- endfor -%}
                      </select>
                    </div>
                  </div>
                </div>
              {%- endif -%}
            {%- endfor -%}
            <script class="as-variants-data" type="application/json">
              {{ product.variants | json }}
            </script>
          </variant-options>
        {%- endunless -%}
        </div>
      {%- when 'quantity_selector' -%}
      <div class="mb-5">
        <p class="mb-2 small quantity-label">{{ 'products.product.quantity.label' | t }}</p>
        <div class="d-inline-block">
          <quantity-input>
            <div class="input-group flex-nowrap quantity">
              <button class="quantity-btn as-quantity-btn" type="button" name="minus" disabled="true">
                <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
                {%- render 'icon-minus' -%}
              </button>
              <input type="number" readonly disabled
                id="quantity-input"
                name="quantity"

                class="fw-bold as-form-control-number form-control-number form-control text-center bg-transparent"
                step="1" min="1" value="1">
              <button class="quantity-btn as-quantity-btn" type="button" name="plus" {%- unless product.selected_or_first_available_variant.available -%}disabled="true"{%- endunless -%}>
                <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
                {%- render 'icon-plus' -%}
              </button>
            </div>
          </quantity-input>
        </div>
      </div>
      {%- when 'buy_buttons' -%}
        <div class="mb-5 mb-lg-7">
          <product-form class="product-form">
            {% liquid
              assign productFormClass = 'form'
              if settings.add_to_cart_action == 'show_added_msg' and settings.cart_type != 'page' and settings.show_cart
                assign productFormClass = productFormClass | append: ' as-async-add-form'
              endif
              %}
            {%- form 'product', product, id: product_form_id, class: productFormClass, novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
              <input class="as-form-quantity" type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
              <input type="hidden" name="quantity" value="1">
              {% assign isBuyOnAmazon = product.selected_or_first_available_variant.metafields.custom.buy_on_amazon %}
              
              <div class="d-grid as-form-button-wrap">
                {% render 'add-error-message' %}
                {% unless hiddenAddToCart %}
                  {% if showNotifyMe == false %}
                    <button name="add" type="submit" class="btn text-nowrap btn-lg {% if block.settings.show_dynamic_checkout_buttons %}btn-outline-primary{% else %}btn-primary{% endif %} " {% unless product.selected_or_first_available_variant.available -%}disabled="true"{% endunless %}>
                      {%- if product.selected_or_first_available_variant.available -%}
                        <span class="as-available-info">{{ 'products.product.add_to_cart' | t }}</span>
                        <span class="as-unavailable-info d-none">{{ 'products.product.sold_out' | t }}</span>
                      {% else %}
                        <span class="as-available-info d-none">{{ 'products.product.add_to_cart' | t }}</span>
                        <span class="as-unavailable-info">{{ 'products.product.sold_out' | t }}</span>
                      {% endif %}
                    </button>
                  {% else %}
                    <button data-notify-me="true" name="add" type="submit" class="btn text-nowrap btn-lg  {% if block.settings.show_dynamic_checkout_buttons %}btn-outline-primary{% else %}btn-primary{% endif %}{% if product.selected_or_first_available_variant.available == false %} p-0 border-0{% endif %}" {% unless product.selected_or_first_available_variant.available -%}disabled="true"{% endunless %}>
                      {%- if product.selected_or_first_available_variant.available -%}
                        <span class="as-available-info">{{ 'products.product.add_to_cart' | t }}</span>
                        {%- assign subscribe_modal_id = '#notify-me' -%}
                      {% else %}
                        <span class="as-available-info d-none">{{ 'products.product.add_to_cart' | t }}</span>
                      {% endif %}
                    </button>

                    {%- if product.selected_or_first_available_variant.available -%}
                      {%- assign subscribe_modal_id = '#notify-me' -%}
                      <a data-bs-toggle="modal" data-bs-target="{{ subscribe_modal_id }}" {% unless product.selected_or_first_available_variant.title contains 'Default' %} data-bs-variant-title="{{ product.selected_or_first_available_variant.title }}"{% endunless %} data-bs-product-title="{{ subscribe_tag }}" class="btn btn-lg btn-outline-primary  as-natify-me-btn d-none">{{ 'products.notify_me.notify_me_text' | t }}</a>
                    {% else %}
                      {%- assign subscribe_modal_id = '#notify-me' -%}
                      <a data-bs-toggle="modal" data-bs-target="{{ subscribe_modal_id }}" {% unless product.selected_or_first_available_variant.title contains 'Default' %} data-bs-variant-title="{{ product.selected_or_first_available_variant.title }}"{% endunless %} data-bs-product-title="{{ subscribe_tag }}" class="btn btn-lg btn-outline-primary  as-natify-me-btn">{{ 'products.notify_me.notify_me_text' | t }}</a>
                    {% endif %}
                  {% endif %}
                {% endunless %}
                {% if block.settings.show_custom_checkout_buttons %}
                    <div class="additional-checkout-buttons additional-checkout-buttons-lg pt-3 as-buy-now-btn{% if product.selected_or_first_available_variant.available == false %} d-none{% endif %}">
                      {% comment %} {% unless current_variant.available %}d-none{% endunless %} {% endcomment %}
                      <a data-variant-id="{% if current_variant %}{{ current_variant.id }}{% elsif product.selected_or_first_available_variant %}{{ product.selected_or_first_available_variant.id }}{% else %}{{ product.variants.first.id }}{% endif %}" data-quantity="1" data-cart-url="{{ routes.cart_url }}" class="btn-lg as-checkout-btn btn  {% if block.settings.show_dynamic_checkout_buttons %} btn-outline-primary {% else %}btn-primary{% endif %}"
                          href="{{ routes.cart_url }}/{{ current_variant.id }}:1" style="width: 100%;">{{ block.settings.buy_custom_label }}</a>
                    </div>
                 {% else %}
                  {% if isBuyOnAmazon %}
                    <div class="additional-checkout-buttons  pt-3">
                      <a class="fw-bold btn btn-primary  px-lg-6 w-100" target="_blank" rel="noopener nofollow" href="{{ isBuyOnAmazon }}">{{ 'products.product.buy_on_amazon' | t }}</a>
                    </div>
                  {% else %}
                    <div class="additional-checkout-buttons additional-checkout-buttons-lg pt-3 as-buy-now-btn{% if product.selected_or_first_available_variant.available == false %} d-none{% endif %}">
                      {{ form | payment_button }}
                      </div>
                  {% endif %}
              {% endif %}
              </div>
            {%- endform -%}
          </product-form>
        </div>
         {% if block.settings.show_custom_checkout_buttons %}
        <script>
              document.addEventListener('DOMContentLoaded', function () {
                  document.querySelectorAll('.as-checkout-btn').forEach(button => {
                    button.addEventListener('click', function (e) {
                      e.preventDefault();

                      const variantId = this.dataset.variantId;
                      const quantity = this.dataset.quantity || 1;

                      if (!variantId) {
                        console.error('Missing variant ID');
                        return;
                      }

                      // Add to cart via POST, then go to checkout
                      fetch('/cart/add.js', {
                        method: 'POST',
                        headers: {
                          'Content-Type': 'application/json',
                          'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                          id: variantId,
                          quantity: parseInt(quantity)
                        })
                      })
                      .then(response => response.json())
                      .then(data => {
                        window.location.href = '/checkout';
                      })
                      .catch(error => {
                        console.error('Error adding to cart:', error);
                      });
                    });
                  });
            });
          </script>
         {%- endif -%}
      {%- when 'description' -%}
        {% if product.description != blank %}
        {% assign richTextContent = product.description %}
        {% assign links = richTextContent | split: '<a ' %}
        {% assign endLink = "" %}
        {% for link in links %}
          {% if link contains 'href="' %}
            {% assign startLink = link | split: 'href="' | last %}
            {% assign endLink = startLink | split: '"' | first %}
          {% endif %}
        {% endfor %}
      {% endif %}
      {% if endLink contains 'https://' %}
        <div class="mb-5 richtext-description">{{ product.description | replace: '<a', '<a target="_blank" rel="noopener nofollow"' }}</div>
      {% else %}
        <div class="mb-5 richtext-description">{{ product.description }}</div>
      {% endif %}
        
      {%- when 'payment_methods' -%}
         <ul class="ps-0 d-flex flex-wrap mb-3 payment-icons" role="list">
          {%- for type in shop.enabled_payment_types -%}
            <li class="list-inline me-1 mb-1">
              {{ type | payment_type_svg_tag: class: '' }}
            </li>
          {%- endfor -%}
        </ul>
      {%- when 'share' -%}
        <div class="dropdown mb-3">
          <button class="dropdown-toggle share-btn text-accent" type="button" id="share-button" data-bs-toggle="dropdown" aria-expanded="false">
            {% render 'icon-upload' %}
            <span>{{ 'products.product.share' | t }}</span>
          </button>
          <ul class="dropdown-menu rounded-0 rounded-2 fs-footnote" aria-labelledby="dropdownMenuButton1">
            <li><a rel="noopener nofollow" target="_blank" class="dropdown-item link-secondary py-2 icon-wrap-md" href="https://facebook.com/sharer/sharer.php?u=https://{{ shop.domain }}{{ product.url }}&quote={{ page_description }}">{% render 'icon-social-media', media: 'facebook' %}{{ 'general.social.alt_text.share_on_facebook' | t }}</a></li>
            <li><a rel="noopener nofollow" target="_blank" class="dropdown-item link-secondary py-2 icon-wrap-md" href="https://twitter.com/intent/tweet?url=https://{{ shop.domain }}{{ product.url }}&text={{ page_description }}">{% render 'icon-social-media', media: 'twitter' %}{{ 'general.social.alt_text.share_on_twitter' | t }}</a></li>
            <li><a rel="noopener nofollow" target="_blank" class="dropdown-item link-secondary py-2 icon-wrap-md" href="https://pinterest.com/pin/create/button/?url=https://{{ shop.domain }}{{ product.url }}&media=https:{{ product.featured_image | img_url  }}&description={{ page_description }}">{% render 'icon-social-media', media: 'pinterest' %}{{ 'general.social.alt_text.share_on_pinterest' | t }}</a></li>
          </ul>
        </div>
    {%- endcase -%}
  {% endfor %}
  </div>
  </div>

